<?php
/**
 * Created by PhpStorm.
 * User: luanalex
 * Date: 2017/9/18
 * Time: 11:31
 */

?>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <link href="../home/style/163css.css" rel="stylesheet"/>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <style type="text/css">

    </style>
    <title>十里香</title>
</head>

<body>

<div id="example"></div>

</body>
</html>
<script type="text/babel">


    var WebSite = React.createClass({
        getInitialState: function() {
            return {
                name: "菜鸟教程",
                site: "http://www.runoob.com",
                clickCount: 0
            };
        },
        handleClick: function () {
            this.setState(function(state) {
                return {clickCount: state.clickCount + 1};
            });
        },
        render: function() {
            return (
                <div>
                <Name name={this.state.name} clickCount ={this.state.clickCount} />
            <Link site={this.state.site} />
            </div>
            );
        }
    });

    var Name = React.createClass({
        render: function() {
            return (
                <div><h1 onClick={this.handleClick()}>{this.props.name}</h1><h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2></div>
            );
        }
    });

    var Link = React.createClass({
        render: function() {
            return (
                <a href={this.props.site}>
            {this.props.site}
            </a>
            );
        }
    });

    ReactDOM.render(
    <WebSite name="alexluan"/>,
        document.getElementById('example')
    );
</script>